<template>
  <div class="login">
    <el-card class="login-card">
      <div slot="header" class="clearfix" :style="{ overflow: 'auto' }">
        <span>{{ type === 'login' ? '登录' : '注册' }}</span>
        <div class="header-right" :style="{ float: 'right' }">
          <span>{{
            type === 'login' ? '还没有账号？去 ' : '已有账号？去 '
          }}</span>
          <span
            :style="{ color: '#409eff', cursor: 'pointer' }"
            @click="changeType"
            >{{ type === 'login' ? '注册' : '登录' }}</span
          >
        </div>
      </div>

      <component :is="activeForm"></component>
    </el-card>
  </div>
</template>

<script>
import Signin from './Signin'
import Signup from './Signup'

export default {
  name: 'login',
  components: {
    Signin,
    Signup
  },
  data() {
    return {
      type: 'login'
    }
  },
  computed: {
    activeForm() {
      return this.type === 'login' ? Signin : Signup
    }
  },
  methods: {
    changeType() {
      this.type = this.type === 'login' ? 'signup' : 'login'
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  padding-top: 10%;
  font-size: 16px;
  background-color: #293c4c;
}

.login-card {
  max-width: 400px;
  margin: 0 auto;
}
</style>
